<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成调研报告</title>
    <style>
        .report-content{
            width: 1473px;
            margin-left: 86px;
        }
        .info-list{
            width: 1473px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            font-size: 26px;
            color: #7D7D7D;
            margin-top: 17px;
        }
        .info-item{
            width: 491px;
            flex-wrap: wrap;
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 25px 0;
        }
        .work-list{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 40px;
        }
        .work-item{
            width: 230px;
            height: 230px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .work-title{
            font-size: 30px;
            color: #FFFFFF;
            margin-top: 30px;
        }
        .work-button{
            padding: 5px 17px;
            background-color: #FFFFFF;
            border-radius: 16px;
            font-size: 16px;
            margin-top: 24px;
        }
        .work-success{
            color: #FAFAFA;
            font-size: 16px;
            margin-left: 144px;
            margin-top: 20px;
        }
        .status-label{
            margin-right: 30px;
        }
        .count-down{
            position: absolute;
            width: 420px;
            height: 373px;
            border-radius: 7px;
            background-color: rgba(245, 130, 32, 0.8);
            top: 352px;
            left: 750px;
            display: none;
        }
    </style>
    <link rel="stylesheet" href="css/base.css">
</head>
<body>
    <div class="heard">
        <img src="img/woniu_logo@2x.png" style="width: 307px;height: 68px;margin-left: 8px;margin-top: 63px;">
        <div class="right-top">
            <div class="heard-item">
                <img src="img/woniu_self@2x.png" style="width: 37px;height: 37px;margin-bottom: 14px;">
                <div>个人主页</div>
            </div>
            <div class="heard-item" onclick="showNavigation()">
                <img src="img/woniu_caidan@2x.png" style="width: 31px;height: 37px;margin-bottom: 14px;">
                <div>功能导航</div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="report-content">
            <div style="height: 88px;"></div>
            <div style="color: #F58220;font-size: 26px;font-weight: Bold;">基本信息</div>
            <div class="info-list">
                <div class="info-item">
                    <img src="img/dashaxiaoqudizhi@2x.png" style="width: 30px;height: 30px;margin-right: 24px;">
                    <div>小区名称：创客360一区二楼210</div>
                </div>
                <div class="info-item">
                    <img src="img/status@2x.png" style="width: 31px;height: 31px;margin-right: 24px;">
                    <div>房屋状态：别墅大宅</div>
                </div>
                <div class="info-item">
                    <img src="img/report@2x.png" style="width: 31px;height: 32px;margin-right: 24px;">
                    <div>装修预算：123万</div>
                </div>
                <div class="info-item">
                    <img src="img/jianzhu@2x.png" style="width: 34px;height: 24px;margin-right: 24px;">
                    <div>建筑面积：120平米</div>
                </div>
                <div class="info-item">
                    <img src="img/shijian2@2x.png" style="width: 29px;height: 29px;margin-right: 24px;">
                    <div>计划启动装修时间：2021-2-16</div>
                </div>
                <div class="info-item">
                    <img src="img/fangjianruzhu@2x.png" style="width: 30px;height: 30px;margin-right: 24px;">
                    <div>预计入住时间：2021-05</div>
                </div>
                <div class="info-item" style="width: 1000px;">
                    <img src="img/yuanjiaojuxing1@2x.png" style="width: 27px;height: 29px;margin-right: 24px;">
                    <div>
                        <span>家庭状态：</span>
                        <span class="status-label">城市精英</span>
                        <span class="status-label">初婴家庭</span>
                        <span class="status-label">纯老康养</span>
                    </div>
                </div>
            </div>
            <div style="color: #F58220;font-size: 26px;font-weight: Bold;margin-top: 48px;">工作台</div>
            <div class="work-list">
                <div style="background-image: url('img/bgd_1@2x.png'); background-size: 100% 100%;" class="work-item">
                    <div class="work-success">已完成</div>
                    <div class="work-title">基本信息</div>
                    <div class="work-button" style="color: #8B8EFC;">点击修改</div>
                </div>
                <div style="background-image: url('img/bgd_2@2x.png'); background-size: 100% 100%;" class="work-item">
                    <div class="work-success">&nbsp;</div>
                    <div class="work-title">家庭习惯</div>
                    <div class="work-button" style="color: #3FD3B7;opacity: 0;">点击修改</div> 
                </div>
                <div style="background-image: url('img/bgd_3@2x.png'); background-size: 100% 100%;" class="work-item">
                    <div class="work-success">&nbsp;</div>
                    <div class="work-title">新居期望</div>
                    <div class="work-button" style="color: #FA7848;opacity: 0;">点击修改</div> 
                </div>
                <div style="background-image: url('img/bgd_4@2x.png'); background-size: 100% 100%;" class="work-item">
                    <div class="work-success">&nbsp;</div>
                    <div class="work-title">整体调研</div>
                    <div class="work-button" style="color: #FA7848;opacity: 0;">点击修改</div> 
                </div>
                <div style="background-image: url('img/bgd_5@2x.png'); background-size: 100% 100%;" class="work-item">
                    <div class="work-success">&nbsp;</div>
                    <div class="work-title">角色调研</div>
                    <!-- <div class="work-button" style="color: #3A90FE;">点击修改</div>  -->
                    <div class="work-button" style="color: #3A90FE;opacity: 0;"></div> 
                </div>
                <div style="background-image: url('img/bgd_6@2x.png'); background-size: 100% 100%;" class="work-item">
                    <div class="work-success">&nbsp;</div>
                    <div class="work-title">调研报告</div>
                    <div class="work-button" style="color: #EC79FC;opacity: 1;" onclick="creatReport()">点击修改</div> 
                </div>
            </div>
        </div>
    </div>
    <div class="navigation" id="navigation" onmouseleave="moveOutNavigation()">
        <div class="navigation-top"></div>
        <div class="navigation-content">
            <div class="navigation-item">
                <img src="img/baogao@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>调研报告</div>
            </div>
            <div class="navigation-heng"></div>
            <div class="navigation-item">
                <img src="img/tuichu@2x.png" style="width: 23px;height: 25px;margin-right: 35px;">
                <div>退出登录</div>
            </div>
        </div>
    </div>
    <div class="foot">Copyright © 2021 All rights reserved.蜗牛渼家 用户需求调研与分析系统</div>
    <div class="count-down" id="countDown">
        <div style="color: #FFFFFF;margin-top: 67px;font-size: 28px;width: 420px;text-align: center;">您的调研报告正在生成中</div>
        <div style="font-size: 100px;color: #FFFFFF;width: 420px;text-align: center;margin-top: 27px;">3</div>
    </div>
</body>
<script>
    let navigationShow = true
    function showNavigation() {
        if (navigationShow == true) {
            document.getElementById("navigation").style.display = "block";
            navigationShow = false
        } else {
            document.getElementById("navigation").style.display = "none";
            navigationShow = true
        }
    }
    function moveOutNavigation() {
        document.getElementById("navigation").style.display = "none";
        navigationShow = true
    }
    function creatReport() {
        document.getElementById("countDown").style.display = "block";
        setTimeout(function(){
            document.getElementById("countDown").style.display = "none";
        },5000)
    }
</script>
</html>